<template>
	<view class="bgColor">
		<!-- 进度条 -->
		<view class="progress-box">
			<text >测试进度</text>
			<view class="progress">
				<u-line-progress activeColor='#2d8dff' :showText='false'  :percentage="percentage" />
			</view>
			<text>{{currentIndex}}/{{topicData.length}}</text>
		</view>
		<!-- 题目 -->
		<view class="question">
			{{topicItem.topic}}
		</view>
		<!-- 单选题 -->
		<view class="topic-view">
			<view class="topic-Title">
				<text></text>
				<text>单选题</text>
			</view>
			<view class="totic" hover-class="hover-style" hover-stay-time="300" v-for="(item,index) in topicItem.options" :key="item.son_id" @click="chooseRes(item.son_id)">
				{{index+1}} :  {{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	import {getDepressionTopicApi,getInsomniaTopicApi} from "../../../../utils/api.js"
	export default {
		data() {
			return {
				// 进度条
				percentage:0,
				// 判断请求什么值,001请求抑郁症,002请求失眠
				flag:"",
				// 题目列表
				topicData:[],
				// 当前展示的题目
				topicItem:{},
				// 题目的id
				topicIdList:[],
				//当前题目是第几个
				currentIndex:0
			};
		},
		methods:{
			// 获取抑郁症的题目
			async getDepressionTopic(){
				const res = await getDepressionTopicApi()
				this.topicData  = res.data
				this.topicItem  = res.data[0]
			},
			// 获取失眠的题目
			async getInsomniaTopic(){
				const res = await getInsomniaTopicApi()
				this.topicData  = res.data
				this.topicItem  = res.data[0]
			},
			// 选择答案的回调 
			chooseRes(id){
				// 把答案Id存起来
				this.topicIdList.push(id)
				// 获取当前题目的下标值
				let index = this.topicData.findIndex(item=>{
					return item._id == this.topicItem._id
				})
				// 修改当前是第几题
				this.currentIndex = index+1
				this.percentage = uni.$u.range(0, 100, Math.ceil(this.percentage + 100/(this.topicData.length+0)) )
				if(this.currentIndex >=this.topicData.length){
					console.log("跳转");
					let obj = JSON.stringify({idList:this.topicIdList,flag:this.flag})
					// 满足跳转要求
					uni.navigateTo({
						url:"../result/result?value="+obj
					})
					return
				}
				// 修改当前的题目
				this.topicItem = this.topicData[index+1]
			}
		},
		onShow() {
			if(this.flag == '001'){
				this.getDepressionTopic()
			}else{
				this.getInsomniaTopic()
			}
		},
		onLoad(option){
			if(option.flag == '002'){
				uni.setNavigationBarTitle({
					
					title:option.name
				})
				this.flag = option.flag
			}else{
				this.flag = option.flag
				uni.setNavigationBarTitle({
					title:option.name
				})
			}
		}
	}
</script>

<style lang="less">
.bgColor{
	height: 100vh;
    background: linear-gradient(to bottom,#d6e8ff 30%,#f2f7fb 55%, #f0f5f9 90%);
}
.progress-box{
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 20rpx;
}
.progress{
  flex: 1;
  background-color: transparent;
  padding: 0 40rpx;
}
.question{
  padding: 30rpx 20rpx;
  margin: 40rpx 20rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}
.topic-view{
  background-color: #f3f8ff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 20rpx;
  box-shadow: #d6e8ff 0px 0px 23rpx 5rpx;
}
.topic-Title{
  display: flex;
  align-items: center;
}
.topic-Title text:nth-child(1){
  width: 8rpx;
  height:27rpx;
  background-color: #0d7cff;
  display: block;
  margin-right: 10rpx;
}
.totic{
  background: #ffffff;
  margin: 20rpx 0;
  padding: 40rpx 10rpx;
  border-radius: 10rpx;
}
.hover-style{
  background-color: #ebf4ff;
  color: #298cff;
}
</style>
